
@property --index {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.img-box {
  position: relative;
}
.img {
  position: absolute;
  width: 400px;
  height: 300px;
  background-size: 400px 300px;
}
.img-1 { background-image: url(./1.png); }
.img-2 { background-image: url(./2.png); }
.img-3 { background-image: url(./3.png); }
.img-4 { background-image: url(./4.png); }
.up-index { z-index: 1; }

.img-anim {
  --index: 0%
  mask: linear-gradient(
    135deg,
    #000 calc(var(--index) - 10%),
    transparent calc(var(--index) + 10%)
  );
  -webkit-mask: linear-gradient(
    135deg,
    #000 calc(var(--index) - 10%),
    transparent calc(var(--index) + 10%)
  );
  animation: maskRotate 1.2s linear forwards;
}

@keyframes maskRotate {
  0% {
    --index: 0%
  }
  100% {
    --index: 100%
  }
}
